<template>
  <basic-container>
    <!-- 素材信息区域 -->
    <div>
      <el-row>
        <el-col :span="24" style="text-align: left">
          <span style="font-size: 18px;font-weight: bold">素材</span>
          <el-divider></el-divider>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6" style="text-align: left">
          <video
            v-if="creative.type === 1 "
            style="height:160px;"
            :src="creative.creativeUrl"
          >
          </video>
          <el-image
            v-else
            style="height:160px;"
            :src="creative.creativeUrl"
            :fit="'cover'">
          </el-image>
        </el-col>
        <el-col :span="2">
        </el-col>
        <el-col :span="14">
          <el-row :gutter="15">
            <el-col :span="12" class="creative_info_edit">
              <div><span>素材名称：</span>{{ creative.name }}</div>
            </el-col>
            <el-col :span="12" class="creative_info_edit">
              <div><span>素材ID：</span>{{ creative.shortId }}</div>
            </el-col>
            <el-col :span="12" class="creative_info_edit">
              <div><span>本地文件名：</span>{{ creative.localFilename }}</div>
            </el-col>
            <!--<el-col :span="12" class="creative_info_edit">-->
            <!--  <div><span>需求方：</span>{{ refineValue(findByProp(allUserList,creativeRequest.requester,'id','realName'),[null,''],'暂无需求方') }}</div>-->
            <!--</el-col>-->
            <el-col :span="12" class="creative_info_edit">
              <div><span>设计师：</span>{{ findByProp(allUserList, func.toList(creative.designer), 'id', 'realName') }}
              </div>
            </el-col>
            <el-col :span="12" class="creative_info_edit">
              <div><span>媒体：</span>{{ creative.platform }}</div>
            </el-col>
            <!--<el-col :span="12" class="creative_info_edit">-->
            <!--  <div><span>首次使用时间：</span>{{ creative.firstUseTime}}</div>-->
            <!--</el-col>-->
            <el-col :span="12" class="creative_info_edit">
              <div><span>标签类：</span>{{ creative.tags }}</div>
            </el-col>
            <el-col :span="12" class="creative_info_edit">
              <div><span>是否有花费：</span>{{ creative.used ? '是' : '否' }}</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <!-- tab 区域 -->
    <el-row style="position: relative">
      <div class="send_comment">
        <el-button id="id-creativerepost-componets-creativelnfo-toComments" type="success" size="medium"
                   style="width: 150px" @click="toComments">发表评论
        </el-button>
      </div>
      <el-tabs v-model="activeName"  @tab-click="handleClickTab">
        <el-tab-pane label="基础信息" name="base">
          <div style=";margin: 0 auto">
            <el-row :gutter="20" class="base_info">
              <el-col :span="12" class="base_info_label"><span>素材尺寸：</span> {{ creative.screenSize }}</el-col>
              <el-col :span="12" class="base_info_label"><span>版本：</span> {{ creative.version }}</el-col>
              <el-col :span="12" class="base_info_label"><span>素材时长：</span> {{ creative.length }}</el-col>
              <el-col :span="12" class="base_info_label"><span>状态：</span> {{ creative.statusName }}</el-col>
            </el-row>
            <!--            <div class="img_wall">-->
            <!--              <img :src="creative.thumbnailUrl">-->
            <!--            </div>-->
            <div class="grid_row grid_title">设计思路</div>
            <div class="grid_row">
              <el-input id="id-creativerepost-componets-creativelnfo-thought" type="textarea" v-model="creative.thought"
                        :rows="3" disabled></el-input>
            </div>
            <div class="grid_row">
              <el-table style="width: 100%" :data="auditData" border>
                <el-table-column prop="id" label="id"></el-table-column>
                <el-table-column prop="submittedTime" label="提交时间"></el-table-column>
                <el-table-column prop="auditStatus" label="审核结果">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ findByProp(auditStatus, scope.row.auditStatus) }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="auditUser" label="审核人">
                  <template slot-scope="scope">
                    <span
                      style="margin-left: 10px">{{
                        findByProp(allUserList, scope.row.auditUser, 'id', 'realName')
                      }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="approvedTime" label="审核时间"></el-table-column>
              </el-table>
            </div>
            <div class="grid_row grid_title">审核建议</div>
            <div class="grid_row">
              <el-input id="id-creativerepost-componets-creativelnfo-comments" type="textarea"
                        v-model="creative.comments" :rows="3" readonly></el-input>
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="效果数据分析" name="performance">
          <tags-chars :creativeId="creativeId" ref="tagsChars"></tags-chars>
        </el-tab-pane>
        <el-tab-pane label="广告分析" name="analyse">
          <tags-table :creativeId="creativeId" ref="tagsTable"></tags-table>
        </el-tab-pane>
        <el-tab-pane label="评论" name="comments">
          <article style="width:80%;margin: 0 auto;">
            <section class="send_comment_body">
              <div style="display: flex;justify-content: space-between;">
                <div>发表你的评论</div>
              </div>
              <div style="margin-top: 20px">
                <el-popover
                  placement="bottom"
                  title="标题"
                  width="500"
                  height="700"
                  trigger="click"
                  v-model="emojiShow"
                >
                  <el-button size="mini" slot="reference">😀</el-button>
                  <div class="browBox">
                    <ul>
                      <li v-for="(item, index) in faceList" :key="index" @click="getBrow(index)">
                        {{ item }}
                      </li>
                    </ul>
                  </div>
                </el-popover>
                <el-button
                  class="submit-btn"
                  type="primary"
                  @click="submitMessage"
                  size="mini"
                  :disabled="form.comments === ''"
                >发送
                </el-button>
                <el-input
                  id="id-creativerepost-componets-creativelnfo-submitMessage"
                  :autosize="{ minRows: 5}"
                  type="textarea"
                  placeholder="请输入内容"
                  @keyup.enter.native="submitMessage"
                  v-model="form.comments"
                >
                </el-input>
              </div>
            </section>
            <section id="id-creativerepost-componets-creativelnfo-creativeCommentsList" class="comment">
              <el-row v-for="(item,index) in creativeCommentsList" :key="index" style="margin-top: 1em"
                      v-if="creativeCommentsPage.total > 0">
                <div class="comment_header">
                  <div class="comment_faces">
                    <img :src="item.id" alt="">
                  </div>
                  <div class="comment_user_name">
                    {{ findByProp(allUserList, item.createUser, 'id', 'realName') }}
                  </div>
                  <div class="comment_date">
                    {{ item.createTime }}
                  </div>
                </div>
                <div class="comment_content">
                  <el-input type="textarea" v-model="item.comments" :row="3" disabled></el-input>
                </div>
              </el-row>
              <el-row v-else>
                <div class="comment_content">
                  暂无评论！
                </div>
              </el-row>
            </section>
            <section>
              <el-button id="id-creativerepost-componets-creativelnfo-checkMoreComments"
                         size="medium" :loading="creativeCommentsListLoading" @click="checkMoreComments()"
                         :disabled="!(creativeCommentsList.length <= creativeCommentsPage.total)">查看更多评论
              </el-button>
            </section>
          </article>
        </el-tab-pane>
      </el-tabs>
    </el-row>

    <el-dialog
      title="预览"
      :visible="mediaPreviewDialog.dialogVisible"
      :modal-append-to-body="false"
      width="80%"
      top="0px;"
      :close-on-click-modal="false"
      :before-close="
        () => {
          mediaPreviewDialog.dialogVisible = false;
          if(mediaPreviewDialog.dialogType === 'video') {
            this.$refs.video.pause();
          }
        }
      "
      :append-to-body="true"
      style="text-align: center"
    >
      <img
        v-if="mediaPreviewDialog.dialogType === 'image'"
        :style="previewStyle()"
        :src="mediaPreviewDialog.previewUrl"
      />
      <video
        ref="video"
        v-if="mediaPreviewDialog.dialogType === 'video'"
        :src="mediaPreviewDialog.previewUrl"
        :style="previewStyle()"
        controls="controls"
      ></video>
    </el-dialog>

  </basic-container>
</template>

<script>
import {getDetail as getCreativveDetail, getAuditList, getMessageList, sendMessage} from "@/api/offer/creative";
import {getDetail as getRequestDetail} from "@/api/offer/creativerequest";
import {getAllUser} from "@/api/user";
import {mapGetters} from "vuex";
import Moment from "moment";
import tagsChars from "./tags_chars"
import tagsTable from "./tags_table";
import {refineValue, refineObject, findObject, findByProp} from "@/util/util";
import func from "@/util/func";


const appData = require("@/config/emojis.json");
export default {
  name: 'creativeInfo',

  props: {
    creativeId: {
      type: String,
    },
    mainDate:{
      type:Array
    },
  },

  components: {
    tagsChars, tagsTable
  },
  data() {
    return {
      func: func,

      creativeCommentsPage: {
        pageSize: 5,
        currentPage: 1,
        total: 0,
      },
      loading: true,
      activeName: 'base',
      creative: {
        thumbnailUrl: '',
        designer: '',
        type: 1
      },
      creativeRequest: {
        requester: '',
      },
      form: {
        comments: '',
      },
      emojiShow: false,//表情框是否展示
      faceList: [],//表情列表
      mediaPreviewDialog: {
        dialogVisible: false,
        dialogType: "image", //image or video
        previewUrl: "",
      },
      getBrowString: '',
      creativeCommentsListLoading: false,
      creativeCommentsList: [],

      auditData: [],

      allUserList: [],
      creativeStatus: [
        {value: "0", label: "等待提交"},
        {value: "1", label: "等待审核"},
        {value: "2", label: "审核通过"},
        {value: "3", label: "审核拒绝"},
        {value: "4", label: "禁用"},
      ],
      auditStatus: [
        {label: '待审核', value: 0},
        {label: '完成', value: 1},
        {label: '已过期', value: 3},
      ],
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    getAllUser({statusList: '0,1,2', isAll: true}).then(res => {
      this.allUserList = res.data.data
    });
    this.loadCreativeComments();
  },
  mounted() {
    this.$nextTick(() =>{
      this.init();
      // this.$refs.tagsChars.searchForm()
      this.loadEmojis();
    })
  },
  methods: {
    findByProp(dic, key, keyProp = 'value', valueProp = 'label') {
      return findByProp(dic, key, keyProp, valueProp);
    },
    refineValue(val, from, to) {
      return refineValue(val, from, to);
    },
    checkMoreComments() {
      this.creativeCommentsPage.currentPage++;
      this.loadCreativeComments();
    },
    handleClickTab(tab){
      switch (tab.name) {
        case 'performance':
          this.$refs.tagsChars.form.date = this.mainDate
          break
        case 'analyse':
          this.$refs.tagsTable.form.reportDate = this.mainDate
          break
      }
    },
    /**
     *  素材详情尺寸
     */
    previewStyle() {
      let height = window.innerHeight < 300 ? 300 : window.innerHeight - 160;
      return {
        maxWidth: "100%",
        maxHeight: height + "px",
      };
    },
    /**
     * 初始化
     */
    init() {
      getAuditList(this.creativeId).then((res) => {
        if (res.data.success) {
          this.auditData = res.data.data;
        }
      });

      getCreativveDetail(this.creativeId).then((res) => {
        this.creative = res.data.data;
        this.creative.thought = refineObject(this.creative.thought, [{from: "", to: "暂无设计思路"}]);
        this.creative.statusName = refineObject(this.creative.status, this.creativeStatus, 'value', 'label');
        this.creative.length = refineObject(this.creative.length, [{from: ["-1", ""], to: "0"}]);
        this.creative.tags = refineObject(this.creative.tags, [{from: "", to: "暂无标签"}]);
        this.creative.firstUseTime = refineObject(this.creative.firstUseTime, [{from: "", to: "暂无使用时间"}]);
        this.creative.ownedDemandId = refineObject(this.creative.ownedDemandId, [{from: ['-1', null], to: ""}]);
        this.creativeRequest = {
          requester: '',
        };
        if (this.creative.ownedDemandId != '') {
          getRequestDetail(this.creative.ownedDemandId).then(res => {
            if (res.data.data != null) {
              this.creativeRequest = res.data.data;
              this.creativeRequest.requester = refineObject(this.creativeRequest.requester, [{
                from: ['-1', null],
                to: ""
              }]);
            }
          });
        }
        console.log('creat',this.creative)
      })

    },
    /**
     * 素材详情
     */
    handleMediaPreview() {
      this.mediaPreviewDialog.previewUrl = this.creative.creativeUrl + "?" + (this.creative.updateTime ? this.creative.updateTime.replace(/[ :-]*/gi, "") : 1234);
      this.mediaPreviewDialog.dialogType = this.creative.type == 0 ? "image" : "video";
      this.mediaPreviewDialog.dialogVisible = true;
    },
    toComments() {
      this.activeName = 'comments';
    },
    loadCreativeComments(page) {
      this.creativeCommentsListLoading = true;
      if (page == null) {
        page = this.creativeCommentsPage;
      }
      getMessageList(page.currentPage, page.pageSize, {creativeId: this.creativeId, version: ''}).then((res) => {
        if (page.currentPage == 1) {
          this.creativeCommentsList = [];
        }
        res.data.data.records.forEach(row => {
          this.creativeCommentsList.push(row);
        })
        this.creativeCommentsPage.total = res.data.data.total;
        this.creativeCommentsPage.currentPage = Math.floor((this.creativeCommentsPage.total + this.creativeCommentsPage.pageSize - 1) / this.creativeCommentsPage.pageSize);
        if (this.creativeCommentsPage.currentPage == 0) {
          this.creativeCommentsPage.currentPage = 1;
        }
      }).finally(() => {
        this.creativeCommentsListLoading = false;
      })
    },
    //加载表情,存放到表情列表中
    loadEmojis() {
      //console.log(appData);
      for (let i in appData) {
        this.faceList.push(appData[i].char);
      }
    },
    getBrow(index) {
      for (let i in this.faceList) {
        if (index == i) {
          this.getBrowString = this.faceList[index];
          this.form.comments += this.getBrowString;
        }
      }
      this.emojiShow = false;
    },
    //提交评价
    submitMessage() {
      let creativeComment = {
        tenantId: this.creative.tenantId,
        creativeId: this.creative.id,
        version: this.creative.version,
        comments: this.form.comments,
        createUser: this.userInfo.user_id,
        status: 1,
      };
      sendMessage(creativeComment).then((res) => {
        if (res.data.success) {
          this.$message.success({message: "提交成功", duration: 10000})
          this.form.comments = "";
          this.loadCreativeComments({
            currentPage: 1,
            pageSize: (this.creativeCommentsPage.currentPage * this.creativeCommentsPage.pageSize)
          });
        }
      })
    },
  },
};
</script>

<style lang="scss">
.creative_info_edit {
  line-height: 2.5em;
  text-align: left;

  span {
    color: #409eff;
    font-weight: 700;
  }
}

.send_comment {
  position: absolute;
  right: 3vw;
  top: -6px;
  z-index: 20;
  cursor: pointer;
}

.base_info {
  width: 60%;
  margin: 0 auto !important;

  .base_info_label {
    text-align: left;
    line-height: 2.5em;

    span {
      color: #409eff;
      font-weight: 700;
    }
  }
}

.img_wall {
  width: 100%;
  height: 300px;
  border: 1px solid #ebebeb;
  border-radius: 3px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  word-break: break-all;
  padding: 3px;
  box-sizing: border-box;

  img {
    max-height: 290px;
    max-width: 100%;
    width: auto;
    height: auto
  }
}

.grid_row {
  margin-top: 1.3em;
}

.grid_title {
  text-align: left;
  font-size: 17px;
  font-weight: 600;
}

.comment {
  padding-top: 1.3em;
  padding-bottom: 1.3em;

  .comment_header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-bottom: 1em;

    .comment_faces {
      padding-right: 20px;

      img {
        width: 35px;
        height: 35px;
        border-radius: 50%;
      }
    }

    .comment_user_name {
      padding-right: 20px;
    }
  }
}

.send_comment_body {
  text-align: left;

  .send_comment_border {
    width: 80%;
    margin: 0 auto;
  }
}
</style>
